<template>
	<div class="table-head clearfix">
		<div class="title left">{{title}}</div>

		<div class="title-menu right clearfix">
			<div class="table-btn left">导出数据</div>

			<ul class="table-tab left clearfix" v-if="timeType == 'day'">
				<li class="on">昨天</li>
				<li>最近7天</li>
				<li>最近30天</li>
			</ul>

			<ul class="table-tab left clearfix" v-if="timeType == 'month'">
				<li class="on">本月</li>
				<li>上月</li>
			</ul>

			<div class="time-wrap left">
		    <el-date-picker type="date" placeholder="开始时间" v-model="startTime" style="width: 110px;"></el-date-picker>
		    <span>~</span>
		    <el-date-picker type="date" placeholder="结束时间" v-model="endTime" style="width: 110px;"></el-date-picker>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
export default {
	props: ['title', 'timeType'],

  data () {
    return {
      startTime: '',
      endTime: ''
    }
  }
}
</script>

<style lang="stylus">
.table-head {
	border: 1px solid #ddd;

	padding: 0 15px;
	height: 50px;
	line-height: 50px;
	font-size: 12px;
	color: #666;
	background-color: #f2f2f2;
	border-bottom: 1px solid #ddd;

	.title-menu {
		.table-tab {
			margin: 10px 0 0 10px;
			border: 1px solid #ccc;
			border-radius: 4px;

			li {
				float: left;
				width: 80px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				background-color: #fff;
				border-right: 1px solid #ccc;
				cursor: pointer;

				&:hover {
					background-color: #f5f5f5;
				}

				&.on {
					color: #fff;
					background-color: #1ABC9C;
				}

				&:first-child {
					border-top-left-radius: 4px;
					border-bottom-left-radius: 4px;
				}

				&:last-child {
					border-right: none;
					border-top-right-radius: 4px;
					border-bottom-right-radius: 4px;
				}
			}
		}

		.time-wrap {
			margin: 10px 0 0 10px;
			width: 240px;
			height: 30px;
			line-height: 30px;
			background-color: #fff;
			border: 1px solid #ccc;

			.el-input__inner,
			.el-input__icon {
				height: 30px;
				line-height: 30px;
			}

			.el-input__inner {
				border: none;
			}

			.el-input--suffix {
				.el-input__inner {
					padding-right: 0;
				}
			}
		}
	}
}

.table-btn {
	margin-top: 10px;
	padding: 0 15px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background-color: #fff;
	border: 1px solid #ccc;
	cursor: pointer;
}

.table-btn:hover {
	background-color: #f5f5f5;
}
</style>